<template>
  <div>
    <Echart
      id="centreLeft2Chart"
      ref="centreLeft2ChartRef"
      :options="options"
      height="4.5rem"
      width="4.125rem"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart';
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        // 设置点的位置(经纬度)
        const geoCoordMap = {
          'Nebraska': [-96.117751, 41.694221, 20],
          'Washington': [-119.807686, 47.531322, 20],
          'New Mexico': [-104.918272, 32.000496, 20],
          'South Dakota': [-96.445508, 42.49063, 20],
          'Kentucky': [-89.55264, 36.577178, 20],
          'Georgia': [-81.171865, 31.558962, 20],
          'Arkansas': [-90.987948, 34.019038, 20],
          'Pennsylvania': [-75.1344, 40.773765, 20],
          'Mississippi': [-88.998902, 30.387373, 20],
          'Colorado': [-102.698142, 36.995149, 20],
          'Utah': [-111.04581, 39.374993, 20],
          'Tennessee': [-83.078732, 35.789472, 20],
          'Wyoming': [-111.045818464842, 41.579844948225798, 20],
          'Indiana': [-86.598108, 37.867382, 20],
          'Alaska': [-136.037134, 58.272929, 20],
          'Nevada': [-116.740522, 40.013336, 20],
          'Illinois': [-88.063802, 37.738645, 20],
          'Vermont': [-72.437719, 43.20275, 20],
          'Montana': [-113.343749, 44.785079, 20],
          'Iowa': [-92.757407, 40.588908, 20],
          'South Carolina': [-80.906004, 32.047957, 20],
          'Arizona': [-111.689407, 34.651412, 20],
          'Ohio': [-81.608408, 39.276043, 20],
          'Alabama': [-87.598928356737005, 30.997454463366299, 20],
          'Wisconsin': [-90.688988, 46.917461, 20],
          'Oregon': [-120.104208, 44.27994, 20],
          'Missouri': [-89.197808, 36.739412, 20],
          'North Carolina': [-76.074109, 35.039032, 20],
          'Oklahoma': [-97.094771, 33.798532, 20],
          'Virginia': [-77.240098, 38.330988, 20],
          'West Virginia': [-77.795631, 39.489623, 20],
          'Louisiana': [-89.146953, 29.070981, 20],
          'Michigan': [-86.659917, 46.470256, 20],
          'Massachusetts': [-70.450431, 41.420703, 20],
          'Idaho': [-113.098064, 44.697477, 20],
          'Florida': [-82.063114, 26.425459, 20],
          'Kansas': [-94.990172, 39.446192, 20],
          'New Hampshire': [-72.467363, 43.052648, 20],
          'Delaware': [-75.439027, 39.313384, 20],
          'Texas': [-97.125282, 27.779241, 20],
          'Minnesota': [-92.640115, 45.932478, 20],
          'Connecticut': [-72.398688, 41.278172, 20],
          'New Jersey': [-74.024543, 40.709436, 20],
          'North Dakota': [-96.839871, 47.398246, 20],
          'Maryland': [-76.026069, 38.18206, 20],
          'Maine': [-68.61358, 44.184312, 20],
          'Hawaii': [-156.803869, 21.175219, 20],
          'Rhode Island': [-71.547051, 41.153684, 20],
          'California': [-119.529603, 36.041155, 20],
          'New York': [-73.392751, 43.822196, 20],
          'District of Columbia': [-77.039006, 38.791645, 20],
        };
        let seriesData = this.cdata;
        let convertData = function (data) {
          let scatterData = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              scatterData.push({
                name: data[i].name,
                cases: data[i].cases,
                deaths: data[i].deaths,
                value: geoCoord.concat(data[i].value),
              });
            }
          }
          //console.info(scatterData);
          return scatterData;
        };

        this.options = {
          showLegendSymbol: true,
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: 14,
              lineHeight: 22,
            },
            position: point => {
              // 固定在顶部
              return [point[0] + 50, point[1] - 20];
            },
            // 如果需要自定义 tooltip样式，需要使用formatter
            formatter:  params => {
              return `${params.data?params.data.name+"<br/>累计确诊"+params.data.cases+'例<br/>累计死亡'+params.data.deaths+'人':'美国本土（48个州）'}`
            }
            /*
              formatter: params => {
                return `<div style=""> ... </div>`
              }
            */
          },
          visualMap: {
            min: 0,
            max: 10,
            show: false,
            seriesIndex: 0,
            // 颜色
            inRange: {
              color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
            },
          },
          // 底部背景
          geo: {
            show: true,
            aspectScale: 0.85, //长宽比
            zoom: 2.2,
            top: '15%',
            left: '-28%',
            map: '美国',
            roam: false,
            itemStyle: {
              normal: {
                areaColor: 'rgba(0,0,0,0)',
                shadowColor: 'rgba(7,114,204, .8)',
                shadowOffsetX: 5,
                shadowOffsetY: 5,
              },
              emphasis: {
                areaColor: '#00aeef',
              },
            },
          },
          series: [
            {
              name: '相关指数',
              type: 'map',
              aspectScale: 0.85, //长宽比
              zoom: 2.2,
              mapType: '美国', // 自定义扩展图表类型
              top: '15%',
              left: '-28%',
              itemStyle: {
                normal: {
                  color: 'red',
                  areaColor: 'rgba(19,54,162, .5)',
                  borderColor: 'rgba(0,242,252,.3)',
                  borderWidth: 1,
                  shadowBlur: 7,
                  shadowColor: '#00f2fc',
                },
                emphasis: {
                  areaColor: '#4f7fff',
                  borderColor: 'rgba(0,242,252,.6)',
                  borderWidth: 2,
                  shadowBlur: 10,
                  shadowColor: '#00f2fc',
                },
              },
              label: {
                formatter: "{b} {c}",
                show: true,
                position: 'insideRight',
                textStyle: {
                  fontSize: 14,
                  color: '#efefef',
                },
                emphasis: {
                  textStyle: {
                    color: '#fff',
                  },
                },
              },
              data: newData,
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              symbolSize: 7,
              effectType: 'ripple',
              legendHoverLink: false,
              showEffectOn: 'render',
              rippleEffect: {
                period: 4,
                scale: 2.5,
                brushType: 'stroke',
              },
              zlevel: 1,
              itemStyle: {
                normal: {
                  color: '#99FBFE',
                  shadowBlur: 5,
                  shadowColor: '#fff',
                },
              },
              data: convertData(seriesData),
            },
          ],
        };
        // 重新选择区域
        //this.handleMapRandomSelect();
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 开启定时器
    startInterval() {
      const _self = this;
      // 应通过接口获取配置时间，暂时写死5s
      const time = 2000;
      if (this.intervalId !== null) {
        clearInterval(this.intervalId);
      }
      this.intervalId = setInterval(() => {
        _self.reSelectMapRandomArea();
      }, time);
    },
    // 重新随机选中地图区域
    reSelectMapRandomArea() {
      const length = 9;
      this.$nextTick(() => {
        const map = this.$refs.centreLeft2ChartRef.chart;
        let index = Math.floor(Math.random() * length);
        while (index === this.preSelectMapIndex || index >= length) {
          index = Math.floor(Math.random() * length);
        }
        map.dispatchAction({
          type: 'mapUnSelect',
          seriesIndex: 0,
          dataIndex: this.preSelectMapIndex,
        });
        map.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index,
        });
        map.dispatchAction({
          type: 'mapSelect',
          seriesIndex: 0,
          dataIndex: index,
        });
        this.preSelectMapIndex = index;
      });
    },
    handleMapRandomSelect() {
      this.$nextTick(() => {
        const map = this.$refs.centreLeft2ChartRef.chart;
        const _self = this;
        setTimeout(() => {
          _self.reSelectMapRandomArea();
        }, 0);
        // 移入区域，清除定时器、取消之前选中并选中当前
        map.on('mouseover', function (params) {
          clearInterval(_self.intervalId);
          map.dispatchAction({
            type: 'mapUnSelect',
            seriesIndex: 0,
            dataIndex: _self.preSelectMapIndex,
          });
          map.dispatchAction({
            type: 'mapSelect',
            seriesIndex: 0,
            dataIndex: params.dataIndex,
          });
          _self.preSelectMapIndex = params.dataIndex;
        });
        // 移出区域重新随机选中地图区域，并开启定时器
        map.on('globalout', function () {
          _self.reSelectMapRandomArea();
          _self.startInterval();
        });
        this.startInterval();
      });
    },
  },
};
</script>
